<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="$!rc.contextPath/common/bootstrap.min.css" />
		<link rel="stylesheet" href="$!rc.contextPath/common/common.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_604979_156g2g4k47w7mn29.css" />
		<link rel="stylesheet" href="$!rc.contextPath/css/swiper.min.css">
		<link rel="stylesheet" href="$!rc.contextPath/css/index.css">
		<title>首页</title>
	</head>
	<body>
	<div class="search">
	  	<div class="search-img" onclick="f_store_list();">
	  		<i class="iconfont icon-dingwei"></i>
	  		<span id="area">青岛市</span>
	  	</div>
	  	<form action="javascript:f_search();" style="width: 50%;"> 
	  		<input style="width: 100%;" class="search-input" type="text" onsearch="f_search();" id="keyword" placeholder="请输入关键字" />
	  	</form>
	  	<a class="sign" href="javascript:window.location.href='$!rc.contextPath/memberView/sign'">
			<img src="img/icon/qiandao.png"  alt="" />
			<span >签到有礼</span>
		</a>
	</div>
	
	<div class="banner swiper-container">
		<div class="swiper-wrapper">
			#foreach($banner in $bannerList)
			<div class="swiper-slide" onclick="javascript:window.location.href='$!rc.contextPath/$!banner.pic_url'">
				<img class="img-responsive" src="http://app.tmaipay.com/$!banner.attach_path" alt="$!banner.pic_notes" />
			</div>
			#end
		</div>
		<!-- 如果需要分页器 -->
    	<div class="swiper-pagination"></div>
	</div>
	
	<div class="classify clear">
		#foreach($type in $typeList)
		<a class="classify-item" href="$!rc.contextPath/skuView/listByType?typeId=$!type.typeId">
			<img class="img-responsive" src="http://app.tmaipay.com/$!type.typeImg" alt="" />
			<p>$!type.typeName</p>
		</a>
		#end
	</div>
	<div class="floor1 clear">
		<div class=".floor1-left">
			<div class="indicate"><span>直降</span></div>
			<img height="150px" src="http://app.tmaipay.com/$!timeshop.attach_path" alt="直降" onclick="javascript:window.location.href='$!rc.contextPath/skuView/detail?skuId=$!timeshop.sku_id'" />
		</div>
		<div class=".floor1-right">
			<div class="indicate"><span>拼团</span></div>
			<img height="150px" src="http://app.tmaipay.com/$!spellgroup.spell_advert_one" alt="$!spellgroup.spell_title" onclick="javascript:window.location.href='$!rc.contextPath/skuView/detail?skuId=$!spellgroup.sku_id'" />
		</div>
	</div>
	<div class="floor2">
		<div class="floor-title">
			小编推荐
		</div>
		#if ($recommendSkuList[0])
		<div class="row floor2-item" onclick="window.location.href='$!rc.contextPath/skuView/detail?skuId=$recommendSkuList[0].sku_id'">
			<div class="col-xs-6 shops-img">
				<img src="http://app.tmaipay.com/$!recommendSkuList[0].attach_path" alt="" />
			</div>
			<div class="col-xs-6">
				<div class="shops-title">
					<i class="iconfont icon-huo"></i>
					<span>$recommendSkuList[0].sku_name</span>
					<i class="iconfont icon-huo"></i>
				</div>
				<div class="shops-intro">
					$recommendSkuList[0].sku_no
				</div>
				<div class="price clear">
					<div class="price-left">
						优惠价：
					</div>
					<div class="price-right">
						<div class="yen">
							￥
						</div>
						<div class="price-num">
							$recommendSkuList[0].promotion_price
						</div>
					</div>
				</div>
			</div>
		</div>
		#end
		#if ($recommendSkuList[1])
		<div class="row floor2-item" onclick="window.location.href='$!rc.contextPath/skuView/detail?skuId=$recommendSkuList[1].sku_id'">
			<div class="col-xs-6">
				<div class="shops-title">
					<i class="iconfont icon-huo"></i>
					<span>$recommendSkuList[1].sku_name</span>
					<i class="iconfont icon-huo"></i>
				</div>
				<div class="shops-intro">
					$recommendSkuList[1].sku_no
				</div>
				<div class="price clear">
					<div class="price-left">
						优惠价：
					</div>
					<div class="price-right">
						<div class="yen">
							￥
						</div>
						<div class="price-num">
							$recommendSkuList[1].promotion_price
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 shops-img">
				<img src="http://app.tmaipay.com/$!recommendSkuList[1].attach_path" alt="" />
			</div>
		</div>
		#end
	</div>
	<div class="floor3">
		<div class="floor-title">当季热销</div>
		<div class="row">
			#if ($recommendSkuList[2])
			<div class="col-xs-5 hots-left" onclick="window.location.href='$!rc.contextPath/skuView/detail?skuId=$recommendSkuList[2].sku_id'">
				<img src="http://app.tmaipay.com/$!recommendSkuList[2].attach_path" alt="" />
				<div>
					<div class="shops-title">$recommendSkuList[2].sku_name</div>
					<div class="price clear">
						<div class="price-left">
							优惠价：
						</div>
						<div class="price-right">
							<div class="yen">
								￥
							</div>
							<div class="price-num">
								$recommendSkuList[2].promotion_price
							</div>
						</div>
					</div>
				</div>
			</div>
			#end
			<div class="col-xs-7">
				#if ($recommendSkuList[3])
				<div class="hots-item" onclick="window.location.href='$!rc.contextPath/skuView/detail?skuId=$recommendSkuList[3].sku_id'">
					<div class="hots-avtar">
						<img src="http://app.tmaipay.com/$!recommendSkuList[3].attach_path" alt="" />
					</div>
					<div class="hots-detail">
						<div class="hots-title">
							$recommendSkuList[3].sku_name
						</div>
						<div class="price clear">
							<div class="price-left">
								优惠价：
							</div>
							<div class="price-right">
								<div class="yen">
									￥
								</div>
								<div class="price-num">
									$recommendSkuList[3].promotion_price
								</div>
							</div>
						</div>
					</div>
				</div>
				#end
				#if ($recommendSkuList[4])
				<div class="hots-item" onclick="window.location.href='$!rc.contextPath/skuView/detail?skuId=$recommendSkuList[4].sku_id'">
					<div class="hots-avtar">
						<img src="http://app.tmaipay.com/$!recommendSkuList[4].attach_path" alt="" />
					</div>
					<div class="hots-detail">
						<div class="hots-title">
							$recommendSkuList[4].sku_name
						</div>
						<div class="price clear">
							<div class="price-left">
								优惠价：
							</div>
							<div class="price-right">
								<div class="yen">
									￥
								</div>
								<div class="price-num">
									$recommendSkuList[4].promotion_price
								</div>
							</div>
						</div>
					</div>
				</div>
				#end
			</div>
		</div>
	</div>
	<div class="floor4">
		<div class="floor-title">
			商品热销
		</div>
		<div class="cart-list">
			#foreach($sku in $hotSkuList)
			<a class="cart-item" >
				<div class="cart-img col-xs-4" onclick="javascript:window.location.href='$!rc.contextPath/skuView/detail?skuId=$!sku.sku_id'">
					<img src="http://app.tmaipay.com/$!sku.attach_path" alt="" />
				</div>
				<div class="cart-detail col-xs-8" onclick="javascript:window.location.href='$!rc.contextPath/skuView/detail?skuId=$!sku.sku_id'">
					<div class="cart-title">$!sku.sku_name</div>
					<div>
						<div class="price clear text-left">
							<div class="price-right">
								<div class="yen">
									￥
								</div>
								<div class="price-num">
									$!sku.sku_price
								</div>
							</div>
						</div>
						<div class="price clear text-left">
							<div class="price-left">
								优惠价：
							</div>
							<div class="price-right">
								<div class="yen">
									￥
								</div>
								<div class="price-num">
									$!sku.promotion_price
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="buy" onclick="f_add_shopcart('$!sku.sku_id')">
					<i class="iconfont icon-ziyuan"></i>
				</div>
			</a>
			#end
		</div>
	</div>
	<a href="http://app.wukongsm.com/entrance" class="link-wukong"></a>
	<div id="ajaxNav">
	#parse("index-tab.html")
	</div>
	</body> 
	<script src="$!rc.contextPath/common/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp"></script>
	<script src="$!rc.contextPath/js/swiper.min.js"></script>
	<script type="text/javascript">
		var lat, lng;
		
		//轮播
		var swiper = new Swiper('.swiper-container', {
	      pagination: {
	        el: '.swiper-pagination',
	        dynamicBullets: true,
	      },
	    });      
		
		$(function(){
			$(".nav-tabbar__item").eq(0).addClass("nav-tabbar__item--on");
			
			if(sessionStorage.getItem('storeId') != null){
				var sname = sessionStorage.getItem('storeName');
				if(sname.length > 5){
					sname = sname.substring(0, 5);
				}
				$("#area").html(sname);
				
			}else{
				wx.config({
				    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId : '$!appId', // 必填，公众号的唯一标识
				    timestamp : '$!timestamp', // 必填，生成签名的时间戳
				    nonceStr : '$!nonceStr', // 必填，生成签名的随机串
				    signature : '$!signature',// 必填，签名
				    jsApiList : ['getLocation'] // 必填，需要使用的JS接口列表
				});
				
				/* 获取详细经纬度后反查腾讯地图得到确切地址 */
				wx.ready(function () {
					wx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function (res) {
							var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							var speed = res.speed; // 速度，以米/每秒计
							var accuracy = res.accuracy; // 位置精度
							lat = latitude;
							lng = longitude;
							sessionStorage.setItem("lat", latitude);
							sessionStorage.setItem("lng", longitude);
							
							f_showPosition(lat ,lng);
						},
						cancel: function (res) {
							f_store_list();
                        }
					});
					
				})
				
				/* var latitude = 31.3616992674; // 纬度，浮点数，范围为90 ~ -90
				var longitude = 120.7266569138; // 经度，浮点数，范围为180 ~ -180。
				lat = latitude;
				lng = longitude;
				sessionStorage.setItem("lat", latitude);
				sessionStorage.setItem("lng", longitude);
				
				f_showPosition(lat ,lng); */
				
			}
			
			/* if(window.location.href.indexOf("storeId") == -1){
				window.location.assign('$!rc.contextPath/index?storeId=' + sessionStorage.getItem('storeId'));
			} */
			
		})
		
		
		function f_showPosition(lat, lng){  
			if(lat == null){
				f_store_list();
			}
			var latlon =lat+','+lng;  
			var url = "http://api.map.baidu.com/geocoder/v2/?ak=ZvGVGUyxG9pLkaZT0Da2GFzFojYy4hKf&callback=renderReverse&location="+latlon+"&output=json&pois=1";  
			$.ajax({   
				type: "GET",   
				dataType: "jsonp",   
				url: url,  
				"async":false, 
				beforeSend: function(){  
					$("#area").html('正在定位...');  
				},  
				success: function (json) {
				    if(json.status==0){  
				        var cityName = json.result.addressComponent.city;
				        $("#area").html(cityName);
				        
				        f_loadstore(cityName, lat, lng);
				        
				        sessionStorage.setItem('cityName', cityName);
				        sessionStorage.setItem('formattedAddress', json.result.formatted_address);
				    }  
				},  
				error: function (XMLHttpRequest, textStatus, errorThrown) {   
				   alert(latlon+"地址位置获取失败");   
				}  
			});  
		} 
		
		/* 获取区域信息 */
		 function f_loadstore(cityName, lat, lng){
			$.ajax({
				"type": "POST",
				"url" : "$!rc.contextPath/common/areaInfo",
				"dataType" : "json",
				"async":false, 
				"data" : {
					areaName : cityName,
					lat : lat,
					lng : lng,
					distance : 10000
			},
			"success": function(data) {
					areaId = data.data.id;
					// 保存areaId到sessionStorage
					sessionStorage.setItem('areaId', areaId);
					
					if(data.data.store != null){
						var sname = data.data.store.store_name;
						if(sname.length > 5){
							sname = sname.substring(0, 5);
						}
						
						$("#area").html(sname);
						
						sessionStorage.setItem('storeName', data.data.store.store_name);
						sessionStorage.setItem('storeId', data.data.store.store_id);
						
						/* if(window.location.href.indexOf("storeId") == -1){
							window.location.assign('$!rc.contextPath/index?storeId=' + data.data.store.store_id);
						} */
					}else{
						location.href = '$!rc.contextPath/storeView/list?areaId=' + areaId;
					}
					
				}
			});
		}; 
		
		function f_store_list(){
			location.href = '$!rc.contextPath/storeView/list?areaId=' + sessionStorage.getItem('areaId');
		}
		
		function f_add_shopcart(skuId){
			
			$.ajax({
	            type: 'POST',
	            url: '$!rc.contextPath/sku/addShopCart',
	            data : {
	            	skuId : skuId
	            },
	            dataType: 'json',
	            success: function(data){
	                console.log(data);
	                if(data.code == '0'){
	                	alert("已加入购物车！")
	                } else if(data.code == '-2'){
	                	window.location.href = '$!rc.contextPath/memberView/bindMobile';
	                } else{
	                	alert(data.text)
	                }
	            }
	        });
			
		}
		
		function f_search(){
			var keyword = $("#keyword").val();
			
			if(keyword == null){
				alert("请输入搜索关键字");
				return false;
			}
			
			//$.post("$!rc.contextPath/skuView/listByKeyword", {"keyword" : keyword});
			window.location.href = '$!rc.contextPath/skuView/listByKeyword?keyword=' + encodeURI(encodeURI(keyword));
		}
		
	</script>
</html>
